<script setup lang="ts">
import axios from 'axios'
import { onMounted, ref } from 'vue'

interface ChannelData {
  id: number
  name: string
}
const list = ref<ChannelData[]>([])
//接收父组件的数据
// defineProps<{
//   channelId: number
// }>()
// // console.log(props)

// // 将子组件的改变的数据发送给父组件
// defineEmits<{
//   (e: 'change', id: number): void
// }>()

//pinia改写
import { useChannelStore } from '@/stores/channel'
const store = useChannelStore()
onMounted(async () => {
  const res = await axios({
    url: 'http://geek.itheima.net/v1_0/channels',
  })
  list.value = res.data.data.channels
})
</script>

<template>
  <div class="channel-nav">
    <nav class="list">
      <a
        class="item"
        :class="{ active: item.id === store.channelId }"
        href="javascript:;"
        v-for="item in list"
        :key="item.id"
        @click="store.changeId(item.id)"
      >
        {{ item.name }}
      </a>
    </nav>
  </div>
</template>
